<template>
    <div class="zs-card zs-layout-flex-col">
        <CardTitle :title="props.title" :isMore="props.isMore" :rightTip="props.rightTip" @onMore="goDetail"></CardTitle>
        <div class="zs-layout-flex-col zs-layout-justify-center zs-layout-grow">
            <!-- <img class="cur-img" :src="props.img"> -->
            <div class="cur-img" :style="{'background-image': `url(${props.img})`}"></div>
        </div>
    </div>
</template>

<script setup>
import CardTitle from '@/DbUiComponents/cardTitle'

const props = defineProps({
    title: {
        type: String,
        required: true,
        default: ''
    },
    isMore: {
        type: Boolean,
        required: false,
        default: true
    },
    rightTip: {
        type: Object,
        required: false,
        default: () => { return { text: '', className: '' } }
    },
    img: {
        type: String,
        required: true,
        default: ''
    }
})
const emit = defineEmits(["onMore"]);
const goDetail = () => {
    emit("onMore");
}

</script>

<style scoped lang="scss">
.cur-img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-size: 100% 100%;
    background-position: center;
}
</style>
